<script setup>
import {onMounted, ref, reactive} from 'vue'
import axios from 'axios';
import {useRouter,useRoute} from "vue-router";
import {snackbar} from './store'
import md5 from 'js-md5'

let username = ref(null)
let password = ref(null)
let code = ref(null)
let codeText = ref("获取验证码")
let userType = ref('')
let show = ref(null)

const route = useRoute();
const router = useRouter()
const form = ref(null);
const emit = defineEmits(['updateUser'])
const style = reactive({
  width: "1920px",
  height: "1080px",
  transform: "scale(1) ",
});

onMounted(() => {
    userType.value = route.query.type
    setScale();
    window.onresize = debounce(setScale, 1000);
})

async function login(username, userType) {
    const { valid } = await form.value.validate()
    if(valid) {
        axios({
            method: 'post',
            url: '/whiteApi/login',
            data: {
                userType: userType,
                userName: username,
                verifyCode: code.value
            }
        }).then(res => {
            if(res.code == 200) {
                localStorage.setItem("token", res.data.token)
                localStorage.setItem("ZAYY_USER_INFO", JSON.stringify(res.data))
                emit("updateUser", res.data)
                router.push('/home')
            } else {
                snackbar.info(res.message)
            }
        })        
    }
}

function debounce(callback, time = 1000) {
  let timeId = null;
  return function (...args) {
    if (timeId !== null) {
      // 清空定时器
      clearTimeout(timeId);
    }
    timeId = setTimeout(() => {
      callback.call(this, ...args);
      timeId = null;
    }, time);
  };
}

const getScale = () => {
  const w = window.innerWidth / 1920;
  const h = window.innerHeight / 1080;
  return [w, h];
  // return w < h ? w : h;
};

const setScale = () => {
  style.transform = "scale(" + getScale()[0] + "," + getScale()[1] + ") ";
};

function getCode() {
    if(!username.value) {
        snackbar.info("请输入手机号！")
        return
    }
    codeText.value = '获取中...'
    let timer = null
    let obj = {
        userType: userType.value,
        phone: username.value
    }
    axios.post("/whiteApi/sendVerifyCode", obj).then(res => {
        if(res.code == 200) {
            snackbar.info(res.data)
            codeText.value = 30
            timer = setInterval(() => {
                codeText.value --
                if(codeText.value == 0) {
                    codeText.value = '获取验证码'
                    clearInterval(timer)
                }
            }, 1000)
        } else {
            snackbar.info(res.message)
            codeText.value = '获取验证码'
        }
    }, err => {
        codeText.value = '获取验证码'
    })
}
</script>

<template>
    <div class="screen-adapter" id="screenAdapter" :style="style">
        <v-main color="background" :scrollable="true">
            <div class="main">
                <div class="container">
                    <img src="./assets/images/top-icon.png" alt="" class="title">
                    <div class="login-title">
                        <span v-if="userType == 2">裁判登录</span>
                        <span v-else-if="userType == 3">选手登录</span>
                        <span v-else>用户登录</span>
                    </div>
                    <v-form ref="form" @submit.prevent style="padding: 44px 60px 0">
                        <v-text-field
                        v-model="username"
                        variant="outlined"
                        prepend-inner-icon="mdi-account"
                        :rules="[v => !!v || '请输入账号(手机号)！']"
                        placeholder="账号(手机号)"></v-text-field>
                        <!-- <v-text-field
                        v-on:click:append-inner="show = !show"
                        prepend-inner-icon="mdi-lock"
                        :append-inner-icon="show ? 'mdi-eye' : 'mdi-eye-off'"
                        :type="show ? 'text' : 'password'"
                        v-model="password"
                        variant="outlined"
                        :rules="[v => !!v || '请输入密码！']"
                        placeholder="密码"></v-text-field> -->
                        <v-row>
                            <v-col col="12" md="8">
                                <v-text-field
                                v-model="code"
                                variant="outlined"
                                :rules="[v => !!v || '请输入验证码！']"
                                placeholder="请输入手机验证码"></v-text-field>
                            </v-col>
                            <v-col col="12" md="4">
                                <v-btn
                                :readonly="codeText != '获取验证码'"
                                class="code-btn"
                                @click="getCode">{{ codeText }}</v-btn>
                            </v-col>
                        </v-row>
                        <v-btn type="submit" block class="mt-2 login-btn" v-on:click="login(username,userType)">登录</v-btn>
                    </v-form>
                </div>
            </div>
        </v-main>        
    </div>
</template>

<style scoped lang="scss">
.screen-adapter {
  transform-origin: 0 0;
  transition: 0.3s;
}
.main {
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f5f5f7;
  background-image: url(./assets/images/bg-new.png);
  background-size: 100% 100%;
  .container {
    min-width: 672px;
    min-height: 493px;
    background-image: url(./assets/images/login-container.png);
    background-size: 100% 100%;
    margin-bottom: 15px;
    text-align: center;
    position: relative;
    .title {
        width: 125px;
        margin: auto 0;
        margin-top: -12px;
    }
    .login-title {
        width: 304px;
        height: 24px;
        background-image: url(./assets/images/login-icon.png);
        background-size: 100% 100%;
        margin: 25px auto 0;
        span {
            font-weight: bold;
            font-size: 36px;
            color: #46BBFE;
            line-height: 23px;
        }
    }
    :deep(.v-field--center-affix .v-label.v-field-label) {
        color: #ffffff;
    }
    :deep(.v-input__control) {
        background: rgba(4,77,144,0.8);
        border: 2px solid #00B4FF;
    }
    :deep(.v-text-field .v-field--active input) {
        color: #ffffff;
    }
    :deep(.v-field__prepend-inner > .v-icon),:deep(.v-field__append-inner > .v-icon) {
        color: #ffffff;
    }
    :deep(.v-text-field .v-field--no-label input) {
        color: #ffffff;
    }
    .code-btn {
        height: 60px;
        background: #4EA0FC;
        border-radius: 6px;
        font-weight: normal;
        font-size: 16px;
        color: #ffffff;
        width: 100%;
    }
  }
}
.login-btn {
    background-color: #007DE9;
    color: #fff;
    font-weight: 400;
    font-size: 20px;
    height: 56px;
    border-radius: 4px;
}
</style>
